{% extends 'admin/base.html' %}
{% load static %}
{% block title %}dashboard{% endblock %}
{% block css %}
    <!-- Custom styles for this page -->
    <link href="{% static 'vendor/datatables/dataTables.bootstrap4.min.css' %}" rel="stylesheet">
    <style>
        td {
            width: 25%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            color: #252b3a;
        }

        table {
            width: 100%;
            table-layout: fixed;
        }

        .uploadImgBtn {
            width: 100px;
            height: 100px;
            cursor: pointer;
            position: relative;
            display: inline-block;
            background: url("/static/img/admin/products/upload/add.png") no-repeat;
            -webkit-background-size: cover;
            background-size: cover;
            overflow: hidden;
        }

        .uploadImgBtn .uploadImg {
            position: absolute;
            right: 0;
            top: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            cursor: pointer;
        }

        .pic {
            width: 100px;
            height: 100px;
        }

        .pic img {
            width: 100%;
            height: 100%;
        }

        .selected-img {
            width: 160px;
            height: 100px;
            position: relative;
            display: inline-block;
            overflow: hidden;
            border: solid #b1c6c1 1px;
            border-radius: 10px;
            margin-right: 10px;
        }

        .selected-img:hover {
            border: solid #25adc6 2px;
        }

        .file-button {
            width: 160px;
            height: 100px;
            position: relative;
            display: inline-block;
            overflow: hidden;
            border: solid #b1c6c1 1px;
            border-radius: 10px;
            margin-right: 10px;
        }

        .file-button:hover {
            border: solid #25adc6 2px;
        }

        .file-button input {
            position: absolute;
            top: 0;
            height: 100px;
            opacity: 0;
        }

        i:hover {
            color: #0081C6;
        }

        @font-face {
            font-family: 'iconfont';  /* project id 1361777 */
            src: url('//at.alicdn.com/t/font_1361777_ufufbwqmfpa.eot');
            src: url('//at.alicdn.com/t/font_1361777_ufufbwqmfpa.eot?#iefix') format('embedded-opentype'),
            url('//at.alicdn.com/t/font_1361777_ufufbwqmfpa.woff2') format('woff2'),
            url('//at.alicdn.com/t/font_1361777_ufufbwqmfpa.woff') format('woff'),
            url('//at.alicdn.com/t/font_1361777_ufufbwqmfpa.ttf') format('truetype'),
            url('//at.alicdn.com/t/font_1361777_ufufbwqmfpa.svg#iconfont') format('svg');
        }

        .iconfont {
            font-family: "iconfont" !important;
            font-size: 20px;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        .icon-delete:before {
            content: "\e63c";
        }
    </style>
{% endblock %}
{% block pagecontent %}
    <!-- Page Heading -->
    <div class="d-flex justify-content-sm-between mb-2" id="page-heading">
        <h1 class="h4 mb-0 text-gray-800">产品管理</h1>
        <div>
            <a href="javascript:void (0)" class="d-none d-sm-inline-block btn btn-sm btn-dark shadow-sm"
               data-toggle="modal" data-target="#uploadFile" onclick="uploadFileModal()"><i class="fas fa-upload fa-sm text-white-50"></i> 导入Excel数据</a>
            <button class="d-none d-sm-inline-block btn btn-sm btn-dark shadow-sm" onclick="download_file('downloadProductTemplate')"><i
                    class="fas fa-download fa-sm text-white-50"></i> 下载Excel模板
            </button>
            <button class="d-none d-sm-inline-block btn btn-sm btn-dark shadow-sm" onclick="download_file('downloadProductAllData')"><i
                    class="fas fa-download fa-sm text-white-50"></i> 导出Excel数据
            </button>
        </div>
    </div>

    <!-- Content Row -->
    <div class="d-flex justify-content-sm-end mb-0">
        <!-- Selected running state -->
        <div class="d-inline-flex">
            <div class="p-1 order-4">
                <div class="input-group">
                    <input type="text" class="form-control" aria-label="Text input with search by criteria"
                           placeholder="请输入搜索内容"
                           id="filter_condition">
                    <div class="input-group-append mb-3">
                        <button class="btn btn-dark" type="button" onclick="filter_products()">
                            <i class="fa fa-search" aria-hidden="true"></i>
                        </button>
                    </div>
                </div>
            </div>
            <div class="p-1 order-4">
                <button type="button" class="btn btn-outline-secondary" onclick="refresh_table()">
                    <span class="fas fa-redo" aria-hidden="true"></span>
                </button>
            </div>
            <div class="p-1 order-4">
                <a href="javascript:void (0)" class="d-none d-sm-inline-block btn btn-dark shadow-sm"
                   data-toggle="modal" data-target="#addProduct" onclick="add_product_modal()"><i
                        class="fas fa-plus"></i>添加产品</a>
            </div>
            <div class="dropdown p-1 order-4">
                <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="fields_dropdownMenuLink"
                   data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    筛选
                </a>
                <div class="dropdown-menu" aria-labelledby="fields_dropdownMenuLink">
                    <div class="form-check dropdown-item">
                        <label class="form-check-label">
                            <input type="checkbox" class="form-check-input" checked onclick="choose_table_fields(this)">产品名称
                        </label>
                    </div>
                    <div class="form-check dropdown-item">
                        <label class="form-check-label">
                            <input type="checkbox" class="form-check-input" checked onclick="choose_table_fields(this)">货号
                        </label>
                    </div>
                    <div class="form-check dropdown-item">
                        <label class="form-check-label">
                            <input type="checkbox" class="form-check-input" checked onclick="choose_table_fields(this)">UniProt
                        </label>
                    </div>
                    <div class="form-check dropdown-item">
                        <label class="form-check-label">
                            <input type="checkbox" class="form-check-input" checked onclick="choose_table_fields(this)">抗体类型
                        </label>
                    </div>
                    <div class="form-check dropdown-item">
                        <label class="form-check-label">
                            <input type="checkbox" class="form-check-input" checked onclick="choose_table_fields(this)">分子量
                        </label>
                    </div>
                    <div class="form-check dropdown-item">
                        <label class="form-check-label">
                            <input type="checkbox" class="form-check-input" checked onclick="choose_table_fields(this)">阳性部位
                        </label>
                    </div>
                    <div class="form-check dropdown-item">
                        <label class="form-check-label">
                            <input type="checkbox" class="form-check-input" checked onclick="choose_table_fields(this)">预处理
                        </label>
                    </div>
                    <div class="form-check dropdown-item">
                        <label class="form-check-label">
                            <input type="checkbox" class="form-check-input" checked onclick="choose_table_fields(this)">克隆号
                        </label>
                    </div>
                    <div class="form-check dropdown-item">
                        <label class="form-check-label">
                            <input type="checkbox" class="form-check-input" onclick="choose_table_fields(this)">存储条件及有效期
                        </label>
                    </div>
                    <div class="form-check dropdown-item">
                        <label class="form-check-label">
                            <input type="checkbox" class="form-check-input" onclick="choose_table_fields(this)">描述
                        </label>
                    </div>
                    <div class="form-check dropdown-item">
                        <label class="form-check-label">
                            <input type="checkbox" class="form-check-input" onclick="choose_table_fields(this)">备注
                        </label>
                    </div>
                    <div class="form-check dropdown-item">
                        <label class="form-check-label">
                            <input type="checkbox" class="form-check-input" onclick="choose_table_fields(this)">实验方案
                        </label>
                    </div>
                    <div class="form-check dropdown-item">
                        <label class="form-check-label">
                            <input type="checkbox" class="form-check-input" onclick="choose_table_fields(this)">产品图片列表
                        </label>
                    </div>
                    <div class="form-check dropdown-item">
                        <label class="form-check-label">
                            <input type="checkbox" class="form-check-input" onclick="choose_table_fields(this)">产品说明书
                        </label>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- DataTales Example -->
    <div class="card shadow mb-4">
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-bordered" id="productsTable" width="100%" cellspacing="0">
                    <thead>
                    <tr>
                        <th>产品名称</th>
                        <th>货号</th>
                        <th>UniProt</th>
                        <th>抗体类型</th>
                        <th>分子量</th>
                        <th>阳性部位</th>
                        <th>预处理</th>
                        <th>克隆号</th>
                        <th>存储条件及有效期</th>
                        <th>描述</th>
                        <th>备注</th>
                        <th>实验方案</th>
                        <th>产品图片</th>
                        <th>产品说明书</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="modal fade" id="uploadFile" tabindex="-1" role="dialog" data-backdrop="static"
         aria-labelledby="uploadFileLabel"
         aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="uploadFileLabel">导入数据</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>

                <div class="modal-body">
                    <div class="input-group">
                        <div class="custom-file">
                            <input type="file" class="custom-file-input" id="input_upload_file">
                            <label class="custom-file-label" for="input_upload_file">选择文件</label>
                        </div>
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" id="btn_upload_file" onclick="upload_file('products')">上传
                    </button>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="addProduct" tabindex="-1" role="dialog" data-backdrop="static"
         aria-labelledby="addProductLabel"
         aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="addProductLabel">添加产品</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>

                <div class="modal-body">
                    <div class="row">
                        <div class="input-group mb-3 col-lg-6">
                            <div class="input-group-prepend" style="width: 25%">
                                <label class="input-group-text" style="width: 100%" for="add_product_name"><span
                                        style="color: red">*</span>产品名称</label>
                            </div>
                            <input type="text" class="form-control" id="add_product_name" required>
                        </div>
                        <div class="input-group mb-3 col-lg-6">
                            <div class="input-group-prepend" style="width: 25%">
                                <label class="input-group-text" style="width: 100%" for="add_item_num"><span
                                        style="color: red">*</span>货号</label>
                            </div>
                            <input type="text" class="form-control" id="add_item_num" required>
                        </div>
                    </div>
                    <div class="row">
                        <div class="input-group mb-3 col-lg-6">
                            <div class="input-group-prepend" style="width: 25%">
                                <label class="input-group-text" style="width: 100%" for="add_uni_prot">UniProt</label>
                            </div>
                            <input type="text" class="form-control" id="add_uni_prot">
                        </div>
                        <div class="input-group mb-3 col-lg-6">
                            <div class="input-group-prepend" style="width: 25%">
                                <label class="input-group-text" style="width: 100%"
                                       for="add_antibody_type">抗体类型</label>
                            </div>
                            <input type="text" class="form-control" id="add_antibody_type">
                        </div>
                    </div>
                    <div class="row">
                        <div class="input-group mb-3 col-lg-6">
                            <div class="input-group-prepend" style="width: 25%">
                                <label class="input-group-text" style="width: 100%"
                                       for="add_molecular_weight">分子量</label>
                            </div>
                            <input type="text" class="form-control" id="add_molecular_weight">
                        </div>
                        <div class="input-group mb-3 col-lg-6">
                            <div class="input-group-prepend" style="width: 25%">
                                <label class="input-group-text" style="width: 100%"
                                       for="add_positive_part">阳性部分</label>
                            </div>
                            <input type="text" class="form-control" id="add_positive_part">
                        </div>
                    </div>
                    <div class="row">
                        <div class="input-group mb-3 col-lg-6">
                            <div class="input-group-prepend" style="width: 25%">
                                <label class="input-group-text" style="width: 100%" for="add_pretreatment">预处理</label>
                            </div>
                            <input type="text" class="form-control" id="add_pretreatment">
                        </div>
                        <div class="input-group mb-3 col-lg-6">
                            <div class="input-group-prepend" style="width: 25%">
                                <label class="input-group-text" style="width: 100%" for="add_clone_num">克隆号</label>
                            </div>
                            <input type="text" class="form-control" id="add_clone_num">
                        </div>
                    </div>
                    <div class="row">
                        <div class="input-group mb-3 col-lg-12">
                            <div class="input-group-prepend" style="width: 20%">
                                <label class="input-group-text" style="width: 100%" for="add_storage_validity_period">存储条件及有效期</label>
                            </div>
                            <textarea class="form-control" id="add_storage_validity_period"></textarea>
                        </div>
                    </div>
                    <div class="row">
                        <div class="input-group mb-3 col-lg-12">
                            <div class="input-group-prepend" style="width: 20%">
                                <label class="input-group-text" style="width: 100%" for="add_remarks">备注</label>
                            </div>
                            <textarea class="form-control" id="add_remarks"></textarea>
                        </div>
                    </div>
                    <div class="row">
                        <div class="input-group mb-3 col-lg-12">
                            <div class="input-group-prepend" style="width: 20%">
                                <label class="input-group-text" style="width: 100%" for="add_description">描述</label>
                            </div>
                            <textarea class="form-control" id="add_description"></textarea>
                        </div>
                    </div>
                    <div class="row">
                        <div class="input-group mb-3 col-lg-12">
                            <div class="input-group-prepend" style="width: 20%">
                                <label class="input-group-text" style="width: 100%"
                                       for="add_experimental_program">实验方案</label>
                            </div>
                            <textarea class="form-control" id="add_experimental_program"></textarea>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" onclick="add_product()">保存
                    </button>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="editProduct" tabindex="-1" role="dialog" data-backdrop="static"
         aria-labelledby="editProductLabel"
         aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="editProductLabel">编辑产品</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>

                <div class="modal-body">
                    <div class="row">
                        <div class="input-group mb-3" style="display: none">
                            <div class="input-group-prepend" style="width: 25%">
                                <label class="input-group-text" style="width: 100%" for="edit_product_id"><span
                                        style="color: red">*</span>产品id</label>
                            </div>
                            <input type="text" class="form-control" id="edit_product_id">
                        </div>
                    </div>
                    <div class="row">
                        <div class="input-group mb-3 col-lg-6">
                            <div class="input-group-prepend" style="width: 25%">
                                <label class="input-group-text" style="width: 100%" for="edit_product_name"><span
                                        style="color: red">*</span>产品名称</label>
                            </div>
                            <input type="text" class="form-control" id="edit_product_name" required>
                        </div>
                        <div class="input-group mb-3 col-lg-6">
                            <div class="input-group-prepend" style="width: 25%">
                                <label class="input-group-text" style="width: 100%" for="edit_item_num"><span
                                        style="color: red">*</span>货号</label>
                            </div>
                            <input type="text" class="form-control" id="edit_item_num" required>
                        </div>
                    </div>
                    <div class="row">
                        <div class="input-group mb-3 col-lg-6">
                            <div class="input-group-prepend" style="width: 25%">
                                <label class="input-group-text" style="width: 100%" for="edit_uni_prot">UniProt</label>
                            </div>
                            <input type="text" class="form-control" id="edit_uni_prot">
                        </div>
                        <div class="input-group mb-3 col-lg-6">
                            <div class="input-group-prepend" style="width: 25%">
                                <label class="input-group-text" style="width: 100%"
                                       for="edit_antibody_type">抗体类型</label>
                            </div>
                            <input type="text" class="form-control" id="edit_antibody_type">
                        </div>
                    </div>
                    <div class="row">
                        <div class="input-group mb-3 col-lg-6">
                            <div class="input-group-prepend" style="width: 25%">
                                <label class="input-group-text" style="width: 100%"
                                       for="edit_molecular_weight">分子量</label>
                            </div>
                            <input type="text" class="form-control" id="edit_molecular_weight">
                        </div>
                        <div class="input-group mb-3 col-lg-6">
                            <div class="input-group-prepend" style="width: 25%">
                                <label class="input-group-text" style="width: 100%"
                                       for="edit_positive_part">阳性部分</label>
                            </div>
                            <input type="text" class="form-control" id="edit_positive_part">
                        </div>
                    </div>
                    <div class="row">
                        <div class="input-group mb-3 col-lg-6">
                            <div class="input-group-prepend" style="width: 25%">
                                <label class="input-group-text" style="width: 100%" for="edit_pretreatment">预处理</label>
                            </div>
                            <input type="text" class="form-control" id="edit_pretreatment">
                        </div>
                        <div class="input-group mb-3 col-lg-6">
                            <div class="input-group-prepend" style="width: 25%">
                                <label class="input-group-text" style="width: 100%" for="edit_clone_num">克隆号</label>
                            </div>
                            <input type="text" class="form-control" id="edit_clone_num">
                        </div>
                    </div>
                    <div class="row">
                        <div class="input-group mb-3 col-lg-12">
                            <div class="input-group-prepend" style="width: 20%">
                                <label class="input-group-text" style="width: 100%" for="edit_storage_validity_period">存储条件及有效期</label>
                            </div>
                            <textarea class="form-control" id="edit_storage_validity_period"></textarea>
                        </div>
                    </div>
                    <div class="row">
                        <div class="input-group mb-3 col-lg-12">
                            <div class="input-group-prepend" style="width: 20%">
                                <label class="input-group-text" style="width: 100%" for="edit_remarks">备注</label>
                            </div>
                            <textarea class="form-control" id="edit_remarks"></textarea>
                        </div>
                    </div>
                    <div class="row">
                        <div class="input-group mb-3 col-lg-12">
                            <div class="input-group-prepend" style="width: 20%">
                                <label class="input-group-text" style="width: 100%" for="edit_description">描述</label>
                            </div>
                            <textarea class="form-control" id="edit_description"></textarea>
                        </div>
                    </div>
                    <div class="row">
                        <div class="input-group mb-3 col-lg-12">
                            <div class="input-group-prepend" style="width: 20%">
                                <label class="input-group-text" style="width: 100%"
                                       for="edit_experimental_program">实验方案</label>
                            </div>
                            <textarea class="form-control" id="edit_experimental_program"></textarea>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" onclick="edit_product()">保存
                    </button>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="deleteProduct" tabindex="-1" role="dialog" data-backdrop="static"
         aria-labelledby="deleteProductLabel"
         aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="deleteProductLabel">删除产品</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <table class="table table-sm table-striped">
                        <thead class="thead-light">
                        <tr>
                            <th scope="col">id</th>
                            <th scope="col">产品名称</th>
                            <th scope="col">货号</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td class="table-info" id="delete_product_id"></td>
                            <td class="table-info" id="delete_product_name"></td>
                            <td class="table-info" id="delete_item_num"></td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" onclick="delete_product()">是
                    </button>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">否</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="uploadImage" tabindex="-1" role="dialog" data-backdrop="static"
         aria-labelledby="uploadImageLabel"
         aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="uploadImageLabel">上传产品图片</h5>
                    <span id="product_id_span" style="display: none"></span>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="align-items-center" style="padding: 10px">
                        <div class="uploadImgBtn" id="uploadImgBtn">
                            <input class="uploadImg" type="file" name="file" multiple id="uploadImg"
                                   accept="image/jpeg,image/jpg,image/png,image/gif">
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" onclick="upload_imgs()">上传
                    </button>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="uploadPdf" tabindex="-1" role="dialog" data-backdrop="static"
         aria-labelledby="uploadPdfLabel"
         aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="uploadPdfLabel">导入产品说明书</h5>
                    <span id="usage_product_id_span" style="display: none"></span>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>

                <div class="modal-body">
                    <div class="input-group">
                        <div class="custom-file">
                            <input type="file" class="custom-file-input" id="input_upload_pdf">
                            <label class="custom-file-label" for="input_upload_pdf">选择文件</label>
                        </div>
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" id="btn_upload_pdf" onclick="upload_pdf()">上传
                    </button>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                </div>
            </div>
        </div>
    </div>
    <div id="outerdiv"
         style="position:fixed;top:0;left:0;background:rgba(0,0,0,0.7);z-index:10000;width:100%;height:100%;display:none;">
        <div id="innerdiv" style="position:absolute;">
            <img id="bigimg" style="border:5px solid #fff;" src="" alt="大图"/>
        </div>
    </div>
    <div class="modal fade" id="addOrder" tabindex="-1" role="dialog" data-backdrop="static"
         aria-labelledby="addOrderLabel"
         aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="addOrderLabel">添加订货信息</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>

                <div class="modal-body">
                    <div class="row">
                        <div class="input-group mb-3 col-md-auto">
                            <div class="input-group-prepend" style="width: 25%">
                                <label class="input-group-text" style="width: 100%" for="add_product_item_num">产品货号</label>
                            </div>
                            <input type="text" class="form-control" id="add_product_item_num" disabled>
                        </div>
                    </div>
                    <div class="row">
                        <div class="input-group mb-3 col-md-auto">
                            <div class="input-group-prepend" style="width: 25%">
                                <label class="input-group-text" style="width: 100%" for="add_product_sub_item_num">子货号</label>
                            </div>
                            <input type="text" class="form-control" id="add_product_sub_item_num" required>
                        </div>
                    </div>
                    <div class="row">
                        <div class="input-group mb-3 col-md-auto">
                            <div class="input-group-prepend" style="width: 25%">
                                <label class="input-group-text" style="width: 100%" for="add_order_flavor">规格</label>
                            </div>
                            <input type="text" class="form-control" id="add_order_flavor" required>
                        </div>
                    </div>
                    <div class="row">
                        <div class="input-group mb-3 col-md-auto">
                            <div class="input-group-prepend" style="width: 25%">
                                <label class="input-group-text" style="width: 100%" for="add_order_unit">单位</label>
                            </div>
                            <input type="text" class="form-control" id="add_order_unit" required>
                        </div>
                    </div>
                    <div class="row">
                        <div class="input-group mb-3 col-md-auto">
                            <div class="input-group-prepend" style="width: 25%">
                                <label class="input-group-text" style="width: 100%" for="add_product_type">产品类型</label>
                            </div>
                            <input type="text" class="form-control" id="add_product_type" required>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" onclick="add_order()">保存
                    </button>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block scripts %}
    <!-- Page level plugins -->
    <script src="{% static 'vendor/datatables/jquery.dataTables.min.js' %}"></script>
    <script src="{% static 'vendor/datatables/dataTables.bootstrap4.min.js' %}"></script>
    <script src="{% static 'vendor/jquery/jquery.fileDownload.js' %}"></script>

    <!-- Page level custom scripts -->
    <script src="{% static 'js/admin/products.js' %}"></script>
    <script type="text/javascript">
        $(function () {
            $('#collapseProducts').collapse('show')
        });
        $('a[href="/console/products"]').addClass('active');
        window.filesList = []
        $('#uploadImg').change(function () {
            let files = this.files;
            let length = files.length;
            for (let i = 0; i < length; i++) {
                window.filesList.push(files[i]);
            }
            $('.selected-img').remove();
            for (let j = 0; j < window.filesList.length; j++) {
                let fr = new FileReader();
                let img_id = "id_upload_img" + j
                $("#uploadImgBtn").before("<div class=\"selected-img\">\n" +
                    "    <i class=\"iconfont icon-delete\" style=\"z-index: 999;background-color:rgba(255,255,255,.8);position: absolute;right: 3px;top: 3px;\" title=\"删除图片\" onclick=\"delete_img(this)\"></i>\n" +
                    "    <img id=\"" + img_id + "\" src=\"\" alt=\"待选图片\" style=\"width: 160px;height: 100px;border-radius: 10px;\" onclick=\"show_big_img(this)\">\n" +
                    "</div>");

                fr.readAsDataURL(window.filesList[j]);//读取文件
                fr.onload = function () {
                    $('#' + img_id).attr("src", this.result)
                }
            }
        });

        $("#input_upload_file").change(function () {
            let fieldVal = $(this).val();
            // Change the node's value by removing the fake path (Chrome)
            fieldVal = fieldVal.replace("C:\\fakepath\\", "");
            if (fieldVal !== undefined || fieldVal !== "") {
                $(this).next(".custom-file-label").attr('data-content', fieldVal);
                $(this).next(".custom-file-label").text(fieldVal);
            } else {
                $(this).next(".custom-file-label").attr('data-content', "选择文件");
                $(this).next(".custom-file-label").text("选择文件");
            }
        });

        $("#input_upload_pdf").change(function () {
            let fieldVal = $(this).val();
            // Change the node's value by removing the fake path (Chrome)
            fieldVal = fieldVal.replace("C:\\fakepath\\", "");
            if (fieldVal !== undefined || fieldVal !== "") {
                $(this).next(".custom-file-label").attr('data-content', fieldVal);
                $(this).next(".custom-file-label").text(fieldVal);
            } else {
                $(this).next(".custom-file-label").attr('data-content', "选择文件");
                $(this).next(".custom-file-label").text("选择文件");
            }
        });

        function delete_img(obj) {
            $(obj).parent().remove();
            let id = $(obj).next().attr('id');
            if (id.startsWith("id_upload_img")) {
                let delete_img_id_index = id.replace(/id_upload_img/g, "");
                window.filesList.splice(Number(delete_img_id_index), 1);
                console.log(window.filesList);
            }

        }

        function show_big_img(obj) {
            imgShow("#outerdiv", "#innerdiv", "#bigimg", obj);
        }

        function imgShow(outerdiv, innerdiv, bigimg, obj) {
            let src = obj.src;//获取当前点击的pimg元素中的src属性
            $(bigimg).attr("src", src);//设置#bigimg元素的src属性
            let windowW = $(window).width();//获取当前窗口宽度
            let windowH = $(window).height();//获取当前窗口高度
            let realWidth = obj.naturalWidth;//获取图片真实宽度
            let realHeight = obj.naturalHeight;//获取图片真实高度
            let imgWidth, imgHeight;
            let scale = 0.8;//缩放尺寸，当图片真实宽度和高度大于窗口宽度和高度时进行缩放

            if (realHeight > windowH * scale) {//判断图片高度
                imgHeight = windowH * scale;//如大于窗口高度，图片高度进行缩放
                imgWidth = imgHeight / realHeight * realWidth;//等比例缩放宽度
                if (imgWidth > windowW * scale) {//如宽度扔大于窗口宽度
                    imgWidth = windowW * scale;//再对宽度进行缩放
                }
            } else if (realWidth > windowW * scale) {//如图片高度合适，判断图片宽度
                imgWidth = windowW * scale;//如大于窗口宽度，图片宽度进行缩放
                imgHeight = imgWidth / realWidth * realHeight;//等比例缩放高度
            } else {//如果图片真实高度和宽度都符合要求，高宽不变
                imgWidth = realWidth;
                imgHeight = realHeight;
            }
            $(bigimg).css("width", imgWidth);//以最终的宽度对图片缩放
            let w = (windowW - imgWidth) / 2;//计算图片与窗口左边距
            let h = (windowH - imgHeight) / 2;//计算图片与窗口上边距
            $(innerdiv).css({"top": h, "left": w});//设置#innerdiv的top和left属性
            $(outerdiv).fadeIn("fast");//淡入显示#outerdiv及.pimg

            $(outerdiv).click(function () {//再次点击淡出消失弹出层
                $(this).fadeOut("fast");
            });
        }

    </script>
{% endblock %}

